<template>
    <PageTemplate>
    <div class="pur" slot="content">

        <div class="container container-top " >
            <el-form  label-width="150px"  :model="win" :rules="winRules"   ref="win" >
                <el-collapse v-model="showCollapse2" accordion>
                    <el-collapse-item name="1" class="search-collapse-title">
                        <template slot="title">
                            <span class="vertical-bar" style="margin:0;" ></span>
                            <font  class="collapse-content" >{{$t('cm.baseinfo')}}</font>
                        </template>
                        <div class="div-form">
                            <el-row>
                                <!--主题-->
                                <el-col :span="12">
                                    <el-form-item  :label="$t('pur.process_folio')"  prop="cudWinLevel" >
                                        <el-input   size="small" class="form-input" v-model="win.cudPrizeAmount" :disabled="true" placeholder="提交后自动生成"></el-input>
                                    </el-form-item>
                                </el-col>
                                <!--流程名称-->
                                <el-col :span="12">
                                    <el-form-item :label="$t('pur.process_procChName')">
                                        <el-input   size="small" class="form-input" v-model="flow_access.procChName" :disabled="true"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>  
                    </el-collapse-item>
                </el-collapse>
                <el-collapse v-model="showCollapse" accordion>
                    <el-collapse-item name="1" class="search-collapse-title">
                        <template slot="title">
                            <span class="vertical-bar" style="margin:0;" ></span>
                            <font  class="collapse-content" >{{$t('te.add')}}( <font >*</font> {{$t('te.must_fill')}})</font>
                        </template>

                        <div class="div-form">
                            <el-row>
                                <!--上传文件-->
                                <el-col :span="12">
                                  <el-form-item :label="$t('fe.uploadFile')">
                                    <FileUploadCommon 
                                      @uploadSuccess="uploadSuccess"
                                      @uploadRemove="uploadRemove" 
                                      :fileList="fileList"
                                      :limit="1"
                                      >
                                    </FileUploadCommon>
                                  </el-form-item>
                                    <!-- <el-form-item :label="$t('fe.uploadFile')" >
                                        <el-upload :show-file-list="false" 
                                        :action="fileUploadUrl" 
                                        :on-success="upfileBack"
                                        :flie-list="fileList" 
                                        :with-credentials ="true"
                                        :before-upload="beforeUpload"
                                        :on-progress="loadingFile"
                                        :on-error="uplofileError"
                                        >
                                            <el-button class="btn-second"  size="small" >{{$t('fe.upload')}}</el-button>
                                        </el-upload>           
                                    </el-form-item> -->
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item :label="$t('pur.process_changereason')" prop="reason" >
                                        <el-input  class="form-input" v-model="win.reason" size="small"  ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="10">
                              <el-col :span="6" style="margin-left: 150px">
                                <el-button type="primary" @click="addFileListDislog">
                                  <i class="el-icon-edit"></i> {{$t('cm.add')}}
                                </el-button>
                                <!-- <el-button type="primary">
                                  <i class="el-icon-upload2"></i> {{$t('cm.import')}}
                                </el-button> -->
                              </el-col>
                            </el-row>
                            <el-row class="row-empty-20"></el-row>
                            <el-row>
                                <!--上传的文件列表-->
                                <el-col :span="24">
                                    <el-form-item :label="$t('pur.process_fileList')" >
                                        <el-table
                                          border
                                          ref="multipleTable"
                                          :data="win.purchaseContractItemList"
                                          tooltip-effect="dark"
                                          style="width: 90%"
                                          :show-overflow-tooltip="true"
                                          :header-cell-style="{background:tableHeaderBGC}"
                                        >
                                          <el-table-column type="index" :label="$t('cm.no')" align="center" width="60"></el-table-column>
                                          <el-table-column prop="demandCode" :label="$t('pur.demandCode')" align="center" width="210"></el-table-column>
                                          <el-table-column prop="contractName" :label="$t('pur.contract_name')" align="center" width="150"></el-table-column>
                                          <el-table-column prop="projectName" :label="$t('pur.contract_item_project')" align="center" width="150"></el-table-column>
                                          <el-table-column prop="serviceName" :label="$t('pur.service_name')" align="center" width="150"></el-table-column>
                                          <el-table-column prop="specification" :label="$t('pur.specification')" align="center"></el-table-column>
                                          <el-table-column prop="num" :label="$t('pur.contract_item_num')" align="center" width="60"></el-table-column>
                                          <el-table-column prop="unit" :label="$t('pur.contract_item_unit')" align="center" width="80"></el-table-column>
                                          <el-table-column prop="currency" :label="$t('pur.currency')" align="center" width="60" :formatter="formatTableText"></el-table-column>
                                          <el-table-column prop="estimateAmount" :label="$t('pur.properAmount')" align="center" width="60"></el-table-column>
                                          <el-table-column prop="requiredArrivalTime" :label="$t('pur.contract_arrival_time')" align="center" width="100" :formatter="formatTableText"></el-table-column>
                                          <el-table-column prop="plannedCompletionTime" :label="$t('pur.plannedCompletionTime')" align="center" width="100" :formatter="formatTableText"></el-table-column>
                                          <el-table-column :label="$t('cm.operate')" align="center" fixed="right">
                                            <template slot-scope="scope">
                                              <el-link  :underline="false"  @click.native.prevent="triggerDelListBtn(scope.row, scope.$index)">{{$t('cm.delete')}}</el-link>
                                            </template>
                                          </el-table-column>
                                        </el-table>               
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>

                    </el-collapse-item>    
                </el-collapse>
                <!--流程部分-->
                <el-collapse v-model="showCollapse1" accordion>
                    <el-collapse-item name="1" class="search-collapse-title">
                        <template slot="title">
                            <span class="vertical-bar" style="margin:0;" ></span>
                            <font  class="collapse-content" >{{$t('fe.procDeal')}}</font>
                        </template>
                        <div>
                            <procApprove :isStartAct="isStartAct" :procObj="flowDetails" :flow_access="flow_access" ></procApprove>
                        </div>  
                    </el-collapse-item>
                </el-collapse>    
            </el-form>
        </div>
        <el-row class="row-empty-30"></el-row>
        <!-- 固定按钮的位置 -->
        <!--使用组件的方式来进行-->
        <fixedbutton >
            <div slot="fixbtn">
                <el-button class="btn-default" type="primary" size="small" @click="saveProc" >{{$t('cm.commit')}}</el-button>
            </div>            
        </fixedbutton>
        <PurProcessDemChangeEdit
          ref="PurProcessDemChangeEdit"
          :fileListDislogVisible="fileListDislogVisible"
          @addFileList="addFileList"
          @closeFileListDislog="closeFileListDislog"
        >
        </PurProcessDemChangeEdit>
    </div>
    </PageTemplate>
</template>

<script>
    import PurProcessDemChangeNext from './js/PurProcessDemChangeNext.js'
    export default PurProcessDemChangeNext
</script>

<style>

</style>